<template>
  <div class="department">
    <PageSearch 
    :search-config="searchConfig"
    @query-click="handleQueryClick" @reset-click="handleRestClick"/>
    <PageContent 
    ref="contentRef" 
    :content-config="contentConfig"
    @new-click="handleNewClick" 
    @edit-click="handleEditClick"/>
    <PageModal 
    :modal-config="modalConfig" 
    ref="modalRef"/>
  </div>
</template>

<script setup lang="ts" name="department">
import { ref } from 'vue'
import PageSearch from '@/components/page-search/page-search.vue'
import PageContent from '@/components/page-content/page-content.vue'
import PageModal from '@/components/page-modal/page-modal.vue'

import searchConfig from './config/search.config'
import contentConfig from './config/content.config'
import modalConfig from './config/modal.config'

//点击了搜索 content的操作
const contentRef = ref<InstanceType<typeof PageContent>>()
const handleQueryClick = (queryInfo: any) => {
  contentRef.value?.fetchPageListData(queryInfo)
}

//重置
const handleRestClick = () => {
  contentRef.value?.fetchPageListData()
}

//新建
const modalRef = ref<InstanceType<typeof PageModal>>()
const handleNewClick = () => {
  modalRef.value?.setModalVisible()
}

//编辑
const handleEditClick= (itemData: any) => {
  modalRef.value?.setModalVisible(false, itemData)
}
</script>

<style scoped>

</style>
